---
import ImageMod from "@/components/ImageMod.astro";
import { markdownify } from "@/lib/utils/textConverter";
const { call_to_action } = Astro.props;
---

{
  call_to_action.data.enable && (
    <section class="mb-28">
      <div class="container">
        <div class="rounded-xl bg-light px-4 py-16 dark:bg-darkmode-light xl:p-20">
          <div class="row items-center justify-between">
            <div class="mb-10 md:col-5 lg:col-4 md:order-2 md:mb-0">
              <ImageMod
                class="w-full"
                src={call_to_action.data.image}
                width={392}
                height={390}
                alt="cta-image"
                format="webp"
              />
            </div>
            <div class="md:col-7 md:order-1">
              <h2
                set:html={markdownify(call_to_action.data.title)}
                class="mb-2"
              />
              <p
                set:html={markdownify(call_to_action.data.description)}
                class="mb-6"
              />
              {call_to_action.data.button.enable && (
                <a
                  class="btn btn-primary"
                  href={call_to_action.data.button.link}
                >
                  {call_to_action.data.button.label}
                </a>
              )}
            </div>
          </div>
        </div>
      </div>
    </section>
  )
}
